<template>
  <view>
    <view class="hrader">
      <image
        src="../../../static/bback.png"
        class="goback"
        @click="back"
        mode=""
      />
      祈福记录
      <view class="reco" @click="record">邀请记录</view>
    </view>
    <view class="content">
      <img class="img" src="../../../static/yaoqb.png" alt="" />
      <view class="saomao">
        <text class="title">扫一扫二维码邀好友</text>
        <view class="qrimg">
          <tki-qrcode
            class="image_bg_qrcode"
            ref="qrcode"
            :val="val"
            :size="size"
            :icon="icon"
            :unit="unit"
            :background="background"
            :foreground="foreground"
            :pdground="pdground"
            :loadMake="loadMake"
            :usingComponents="true"
            @result="qrR"
            v-if="isShow"
          />
        </view>
        <view class="copy" @click="copyurl(val)">复制链接去邀请</view>
      </view>
    </view>

    <uni-popup ref="popup" type="bottom">
      <view class="box">
        <view class="selectPopup_one">
          <image
            src="../../../static/clos.png"
            class="clos"
            mode="widthFix"
            @click="close"
          ></image>
          <text style="margin: 0 auto">邀请记录</text>
        </view>
        <scroll-view
          :scroll-into-view="toView"
          scroll-y="true"
          scroll-with-animation="true"
          class="scroll-y"
        >
          <view class="selectPopup_two" v-for="(item, i) in list" :key="i">
            <image
              :src="item.avatar"
              mode="widthFix"
              style="width: 90rpx"
              class="avatar"
            ></image>
            <view class="user">
              <view class="nicheng">{{ item.nickname }}</view>
              <view class="time">{{ item.createtime | formatDate }}</view>
            </view>
          </view>
        </scroll-view>
        <view class="kuaiqu" v-show="list.length !== 0">
          <image
            class="img"
            src="../../../static/PersonalCenter/nodata.png"
            mode=""
          />
          <view class="nodata">您暂时没有相关记录~</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue";
export default {
  data() {
    return {
      isShow: true,
      val: "", // 要生成的二维码值
      size: 210, // 二维码大小
      unit: "rpx", // 单位
      background: "#ffffff",
      foreground: "#000000",
      pdground: "#000000",
      loadMake: true, // 组件加载完成后自动生成二维码
      token: "",
      icon: "",
      toView: "",
      list: [],
    };
  },
  components: {
    tkiQrcode,
  },
  onLoad() {
    this.token = uni.getStorageSync("token");
  },
  onShow() {
    this.getuserInfo();
    this.myInvite();
  },

  methods: {
    back() {
      // uni.switchTab({
      //   url: "../user",
      // });
      uni.navigateBack({
        delta: 1,
      });
    },
    creatQrcode() {
      this.$refs.qrcode._makeCode();
    },
    record() {
      this.$refs.popup.open();
    },
    close() {
      this.$refs.popup.close();
    },
    qrR(res) {
      this.src = res;
    },

    // 获取用户信息
    async getuserInfo() {
      let that = this;
      const res = await that.$myRequest({
        url: "user/getUserInfo",
        method: "GET",
        header: {
          token: that.token,
        },
        data: {},
      });
      if (res.data.code == 1) {
        let code = res.data.data.invite_code;
        this.val =
          this.$process == "development"
            ? "https://www.123qifu.com/internaltesting/index.html#/pages/user/register/register?invite_code=" +
              code
            : "https://www.123qifu.com/wechatdemo/index.html#/pages/user/register/register?invite_code=" +
              code;
        setTimeout(() => {
          that.creatQrcode();
        }, 100);
      }
    },
    // 复制链接
    copyurl(url) {
      var copyTest = url;
      var inputTest = document.createElement("input");
      inputTest.value = copyTest;
      document.body.appendChild(inputTest);
      inputTest.select();
      document.execCommand("Copy");
      inputTest.className = "oInput";
      inputTest.style.display = "none";
      uni.showToast({
        icon: "none",
        title: "复制成功",
      });
    },

    // 我的邀请记录
    async myInvite() {
      let that = this;
      const res = await that.$myRequest({
        url: "user/myInvite",
        method: "POST",
        header: {
          token: that.token,
        },
        data: {},
      });
      if (res.data.code == 1) {
        this.list = res.data.data;
      }
    },
  },
};
</script>

<style lang="scss">
page {
  width: 750rpx;
  background: linear-gradient(-90deg, #ba393a 0%, #ed6f6e 100%);
}
.hrader {
  width: 100%;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  position: relative;
  font-size: 36rpx;
  font-weight: 500;
  color: #333333;
  z-index: 99;
  .goback {
    position: absolute;
    width: 22rpx;
    height: 34rpx;
    left: 28rpx;
  }
  .reco {
    position: absolute;
    font-size: 30rpx;
    font-weight: 400;
    color: #333333;
    right: 30rpx;
  }
}
.content {
  width: 100%;
  overflow: hidden;
  .img {
    display: block;
    width: 590rpx;
    height: 356rpx;
    margin: 56rpx auto 0;
    position: relative;
    z-index: 1;
  }
}
.saomao {
  width: 702rpx;
  height: 786rpx;
  background: #ffffff;
  border-radius: 22rpx;
  margin: -40rpx auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 99;
  overflow: hidden;
  .title {
    text-align: center;
    font-size: 36rpx;
    font-weight: 500;
    color: #333333;
    margin-top: 63rpx;
  }
  .qrimg {
    margin: 40rpx auto 0;
  }
}

.copy {
  width: 350rpx;
  height: 74rpx;
  border: 1rpx solid #c52b2e;
  border-radius: 37rpx;
  text-align: center;
  line-height: 74rpx;
  font-size: 30rpx;
  font-weight: 500;
  color: #c52b2e;
  margin: 60rpx auto 0;
}

.box {
  width: 100%;
  height: 780rpx;
  background-color: #ffffff;
  border-radius: 40rpx 40rpx 0 0;

  .selectPopup_one {
    display: flex;
    align-items: center;
    width: 100%;
    font-size: 34rpx;
    font-weight: 500;
    color: #333333;
    padding: 40rpx 0;
    border-bottom: 1rpx solid #eee;

    .clos {
      width: 24rpx;
      position: relative;
      left: 39rpx;
    }
  }
  .scroll-y {
    width: 100%;
    height: 600rpx;
    overflow-y: auto;
  }
  .selectPopup_two {
    display: flex;
    width: 702rpx;
    height: 150rpx;
    margin: 0 auto;
    box-sizing: border-box;
    align-items: center;
    border-bottom: 1rpx solid #eeee;
    .avatar {
      border-radius: 50%;
      margin-right: 25rpx;
    }
    .user {
      .nicheng {
        font-size: 30rpx;
        font-weight: 500;
        color: #333333;
        padding-bottom: 5rpx;
      }
      .time {
        font-size: 20rpx;
        font-weight: 400;
        color: #999999;
      }
    }
  }
  .selectPopup_two:last-of-type {
    border-bottom: none;
  }
}
.kuaiqu {
  .img {
    display: block;
    width: 288rpx;
    height: 156rpx;
    margin: 160rpx auto 0;
  }
  .nodata {
    text-align: center;
    font-size: 26rpx;
    font-weight: 400;
    color: #999999;
    margin-top: 22rpx;
  }
}
</style>
